import React from "react";
import {Icon} from 'antd';
import FormDesignerMain from "./Main";
import FormDesignerHeader from "./Header";
import {inject, observer} from "mobx-react";
import {WeaLocaleProvider, WeaRightMenu} from 'ecCom';
import ThemeContext, {getTheme} from "./theme";
import "./index.less";

const { getLabel } = WeaLocaleProvider;
const { Provider } = ThemeContext;
const defaultTheme = getTheme();

@inject('routing', 'edcFormDesignerStore')
@observer
export default class FormDesigner extends React.Component {
  constructor(props) {
    super();

    const { params, readonly } = props;
    const { appid } = params;

    this.store = props.edcFormDesignerStore;
    this.store.init(appid, readonly);
  }

  onRightMenuClick = key => {
    const { saveForm } = this.store;

    switch(key) {
      case "1":
        saveForm();
        break;
      case "2":
        this.props.routing.push({
          pathname: `/edc/form/preview/${this.store.appid}`,
        });
        break;
    }
  }

  render() {
    const { theme, readonly } = this.store;
    const rightMenu = [{
      key: '1',
      disabled: readonly,
      icon: <Icon type = 'save'/> ,
      content: getLabel(30986, '保存'),
    }, {
      key: '2',
      icon: <Icon type = 'eye-o'/> ,
      content: getLabel(221, '预览'),
    }];
    
    return (
      <div className='edc-form-designer'>
        <WeaRightMenu
          datas={rightMenu}
          showUrlItem={false}
          onClick={this.onRightMenuClick}
        >
          <FormDesignerHeader />
          <Provider value={theme || defaultTheme}>
            <FormDesignerMain />
          </Provider>
        </WeaRightMenu>
      </div>
    );
  }
}